import {createBrowserRouter} from 'react-router-dom'
import React  from 'react';
import  { lazy } from 'react';
const Layout = lazy(()=>import("@/page/Layout"))
const App = lazy(()=>import("@/App"))
const Goods = lazy(()=>import("@/page/Goods"))
const Me = lazy(()=>import("@/page/Me"))
const NotFound = lazy(()=>import("@/page/NotFound"))
const Login = lazy(()=>import("@/page/Login"))
const Roles = lazy(()=>import("@/page/Roles"))

const withLoadingComponent = (comp) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        {comp}
    </React.Suspense>
);

const router = createBrowserRouter([
    {
        path:'/',
        element:withLoadingComponent(<Layout/>),
        children:[
            {
                index:true,// 默认
                element:withLoadingComponent(<App/>)
            },
            {
                path:'/goods',
                element:withLoadingComponent(<Goods/>)
            },
            {
                path:'/me',
                element:withLoadingComponent(<Me/>)
            },
            {
                path:'/roles',
                element:withLoadingComponent(<Roles/>)
            },
            {
                path:'*',
                element:withLoadingComponent(<NotFound/>)
            },
        ]
    },
    {
        path:'/login',
        element:withLoadingComponent(<Login/>)
    },
])

export default router